import React, {useState, useEffect} from "react";
import style from './style.module.scss'

export default function Pre05Composite() {
    const [activePage, setActivePage] = useState('home')

    return <>
        <h3>组件的复合</h3>
        <div className={style['p-05']}>
            {activePage === 'home'
                ? <Home activePage={activePage} setActivePage={setActivePage}/>
                : <User activePage={activePage} setActivePage={setActivePage}/>}
        </div>
    </>
}

function Home({activePage, setActivePage}) {
    return <>
        <Layout activePage={activePage} setActivePage={setActivePage} title={'home'}>
            {/*home页面*/}
            {{
                content: <div>home页传来的对象内容</div>,
                title: 'home页传来的对象标题',
                onClick: () => {
                    console.log('home页对象中定义的点击事件')
                }
            }}
        </Layout>
    </>
}

function User({activePage, setActivePage}) {
    const onClick = () => {
        console.log('用户中心页定义的点击事件')
    }
    return <>
        <Layout activePage={activePage} setActivePage={setActivePage} title={'user'} onClick={onClick}>
            用户中心页面
        </Layout>
    </>
}

function TopBar({title}) {
    return <>
        <div className={'top-bar'}>{title}顶部导航兰</div>
    </>
}

function BottomBar({activePage, setActivePage}) {

    return <ul className={'bottom-bar'}>{
        ['home', 'user'].map(item =>
            <li key={item}
                className={activePage === item ? 'active' : ''}
                onClick={() => setActivePage(item)}>
                {item}
            </li>)
    }


    </ul>
}

function Layout({activePage, setActivePage, title, children, onClick}) {
    console.log(children)
    return <>
        <TopBar title={title}/>
        <div className={'layout-body'}>
            模板的body
            <div>
                {children.title}
                {children.content}
            </div>
            <button onClick={onClick||children.onClick}>来自{activePage}的事件</button>
        </div>
        <BottomBar activePage={activePage} setActivePage={setActivePage}/>
    </>
}


